<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>粉丝行为统计分析</title>
	<link rel="shortcut icon" type="image/ico" href="${basePath}/favicon.ico?v=1"/>
	<link rel="stylesheet" type="text/css" href="${basePath}/css/style-1.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/style_2_common.css" />
	<link rel="stylesheet" type="text/css" href="${basePath}/css/cymain.css" />
	<script type="text/javascript" src="${basePath}/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="${basePath}/js/echart/echarts.js"></script>
</head>
<body id="nv_member" class="pg_CURMODULE">
<#assign current='menu_analyse'>
	<div id="wp" class="wp">
		<#include "/include/header.html"/>
		<!--中间内容-->
		<div class="contentmanage">
			<div class="developer">
				<div class="tableContent">
					<#include "/include/left.html"/>
					<#include "/include/wxtop.html"/>
					<div class="content">
						<div class="cLineB">
							<h4 style="font-size:16px;">粉丝行为统计分析</h4>
							<div class="clr"></div>
						</div>
						<div class="cLineD"></div>
						<div class="cLine">
							<div style="margin: 0 auto" class="ftip">认证服务号才能使用此功能</div>
						</div>
						<div class="msgWrap form">
							<ul style="width: 100%" id="tags">
								<li class="selectTag"><a href="javascript:void(0);">7日粉丝数量统计</a></li>
								<div style="height: 1px; background: #eee; margin-bottom: 20px;" class="clr"></div>
							</ul>
						</div>
						
						 <div id="echart_id1" style="height:300px;padding:5px;"></div>
						 
						 <div class="msgWrap form">
							<ul style="width: 100%" id="tags">
								<li class="selectTag"><a href="javascript:void(0);">粉丝性别统计</a></li>
								<div style="height: 1px; background: #eee; margin-bottom: 20px;" class="clr"></div>
							</ul>
						</div>
						
						 <div id="echart_id2" style="height:300px;padding:5px;"></div>
						 
						 <div class="msgWrap form">
							<ul style="width: 100%" id="tags">
								<li class="selectTag"><a href="javascript:void(0);">3个月内粉丝事件统计</a></li>
								<div style="height: 1px; background: #eee; margin-bottom: 20px;" class="clr"></div>
							</ul>
						</div>
						
						 <div id="echart_id3" style="height:300px;padding:5px;"></div>
					</div>
					<div class="clr"></div>
				</div>
			</div>
		</div>
		<!--底部-->
	</div>
	</div>
	</div>
	</div>
	<#include "/include/footer.html"/>
</body>
<script>
function intChart1(dateStr,numStr){
	 require(
	            [
	                'echarts',
	                'echarts/chart/bar'
	            ],
	            function (ec) {
	                var myChart = ec.init(document.getElementById('echart_id1'));
	                var  option = {
	                	    title : {
	                	        text: '最近7日用户统计'
	                	    },
	                	    tooltip : {
	                	        trigger: 'axis'
	                	    },
	                	    legend: {
	                	        data:['关注数']
	                	    },
	                	    toolbox: {
	                	        show : true,
	                	        feature : {
	                	            mark : {show: true},
	                	            dataView : {show: true, readOnly: false},
	                	            magicType : {show: true, type: ['line', 'bar']},
	                	            restore : {show: true},
	                	            saveAsImage : {show: true}
	                	        }
	                	    },
	                	    calculable : true,
	                	    xAxis : [
	                	        {
	                	            type : 'category',
	                	            data : dateStr
	                	        }
	                	    ],
	                	    yAxis : [
	                	        {
	                	            type : 'value'
	                	        }
	                	    ],
	                	    series : [
	                	        {
	                	            name:'关注数',
	                	            type:'bar',
	                	            data:numStr,
	                	            markPoint : {
	                	                data : [
	                	                    {type : 'max', name: '最大值'},
	                	                    {type : 'min', name: '最小值'}
	                	                ]
	                	            },
	                	            markLine : {
	                	                data : [
	                	                    {type : 'average', name: '平均值'}
	                	                ]
	                	            }
	                	        }
	                	    ]
	                	};
	                myChart.setOption(option);
	                myChart.resize();
	        	    window.onresize = function () {
	                	myChart.resize();
	                }
	            }
	        );
}


function intChart2(dateStr){
	 require(
	            [
	                'echarts',
	                'echarts/chart/pie'
	            ],
	            function (ec) {
	                var myChart = ec.init(document.getElementById('echart_id2'));
	                var  option = {
	                	     toolbox: {
	                	        show : true,
	                	        feature : {
	                	            mark : {show: true},
	                	            dataView : {show: true, readOnly: false},
	                	            magicType : {
	                	                show: true, 
	                	                type: ['pie', 'funnel'],
	                	                option: {
	                	                    funnel: {
	                	                        x: '25%',
	                	                        width: '50%',
	                	                        funnelAlign: 'left',
	                	                        max: 1548
	                	                    }
	                	                }
	                	            },
	                	            restore : {show: true},
	                	            saveAsImage : {show: true}
	                	        }
	                	    },  
	                	    calculable : true,
	                	    series : [
	                	        {
	                	            name:'访问来源',
	                	            type:'pie',
	                	            radius : '75%',
	                	            center: ['50%', '50%'],
	                	            data:dateStr
	                	        }
	                	    ]
	                	};
	                myChart.setOption(option);
	                myChart.resize();
	        	    window.onresize = function () {
	                	myChart.resize();
	                }
	            }
	        );
}

$(document).ready(function() {
	require.config({
        paths: {
            echarts: '${basePath}/js/echart'
        }
    });
	
	$.ajax({
        type:'get',
        url:'total',
        cache:false,
        success:function(type_json, textStatus){
        	if(type_json.success == true){
        		intChart1(type_json.data[0].dateStr,type_json.data[0].numStr);
		      }else{
		    	  tusi("获取数据失败");
		        }
        }
    });
	$.ajax({
        type:'get',
        url:'sexCount',
        cache:false,
        success:function(type_json, textStatus){
        	if(type_json.success == true){
        		intChart2(type_json.data[0]);
		      }else{
		    	  tusi("获取数据失败");
		        }
        }
    });
	
	$.ajax({
		type: "GET",
		url: "fansEventCount",
		cache:false,
		dataType: "json",
		success: function(data){
			if(data!=null){
				require(
			      [
			           'echarts',
			           'echarts/chart/bar'
			       ],
			       function (ec) {
			           var myChart3 = ec.init(document.getElementById('echart_id3'));
			           var  option = {
			           	    title : {
			           	        text: '最近3个月用户行为统计'
			           	    },
			           	    tooltip : {
			           	        trigger: 'axis'
			           	    },
			           	    legend: {
	                	        data:['数量']
	                	    },
			           	    toolbox: {
			           	        show : true,
			           	        feature : {
			           	            restore : {show: true},
			           	            saveAsImage : {show: true}
			           	        }
			           	    },
			           	    xAxis : [
			           	        {
			           	            type : 'category',
			           	            data : data.xAxis,
					           	    axisLabel :{  
					           	      interval:0   
					           	  	}  
			           	        }
			           	    ],
			           	    yAxis : [
			           	        {
			           	            type : 'value'
			           	        }
			           	    ],
			           	    series : [
			           	        {
			           	            name:'总量',
			           	            type:'bar',
			           	            data:data.data
			           	        }
			           	    ]
			           	};
			           myChart3.setOption(option);
			           myChart3.resize();
			   	       window.onresize = function () {
			   	    	myChart3.resize();
			           }
			       }
			   );
			}else{
				tusi("获取数据失败");
			}
		}
	});
});

function intChart3(data){
	var _dom = "<table><tbody>";
	var dateM = null;
	var dateNum = 0;
	_dom += "<tr><td>时间</td><td>事件</td><td>数量</td></tr>";
	for(i=0;i<data.length;i++){
		var json = data[i];
		_dom+="<tr>";
		if(json.daytime != dateM){
			dateM = json.daytime;
			for(j=0;j<data.length;j++){
				if(data[j].daytime == dateM){
					dateNum++;
				}
			}
			_dom+="<td rowspan="+dateNum+" class='px'>"+json.daytime+"</td>";
			
		}
		_dom+="<td class='px'>"+json.msgtypeStr+"</td>";
		_dom+="<td class='px'>"+json.count+"</td>";
		_dom+="</tr>";
		dateNum = 0;
	}
	_dom +="</tbody></table>";
	document.getElementById('echart_id3').innerHTML = _dom;
}


</script>
</html>